<template>
  <view class="bottom-navigation flex-row justify-between">
    <view class="nav-item flex-col" v-for="(item, index) in navItems" :key="index">
      <image
        class="nav-icon"
        referrerpolicy="no-referrer"
        :src="item.icon"
      />
      <text class="nav-text">{{item.text}}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BottomNavigation',
  props: {
    navItems: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-between {
  justify-content: space-between;
}

.bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 98rpx;
  background-color: #FFFFFF;
  box-shadow: 0px -2rpx 10rpx 0px rgba(0, 0, 0, 0.05);
  padding: 12rpx 0;
  z-index: 100;
}

.nav-item {
  flex: 1;
  align-items: center;
  justify-content: center;
}

.nav-icon {
  width: 44rpx;
  height: 44rpx;
  margin-bottom: 6rpx;
}

.nav-text {
  font-size: 22rpx;
  color: #333;
  text-align: center;
}
</style>
